<!--
 * @Descripttion: 仿钉钉流程设计器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年9月14日08:38:35
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<div class="sc-workflow-design">
		<div class="box-scale">
			<node-wrap v-model="nodeConfig"></node-wrap>
			<div class="end-node">
				<div class="end-node-circle"></div>
				<div class="end-node-text">流程结束</div>
			</div>
		</div>
	</div>
</template>

<script>
	import nodeWrap from './nodeWrap'

	export default {
		props: {
			modelValue: { type: Object, default: () => {} }
		},
		components: {
			nodeWrap
		},
		data() {
			return {
				nodeConfig: this.modelValue
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.sc-workflow-design {width: 100%;}

	.box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}

	.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
	.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}

	.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
	.node-wrap-box.start-node:before {content: none}

	.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;}
	.node-wrap-box .title .icon {margin-right: 5px;}
	.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
	.node-wrap-box .content {position: relative;padding: 15px;}
	.node-wrap-box .content .placeholder {color: #999;}
	.node-wrap-box:hover .close {display: block;}

	.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
	.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
	.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
	.add-node-btn span {}

	.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}

	.branch-wrap {display: inline-flex;width: 100%;}
	.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}

	.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
	.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
	.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}

	.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
	.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
	.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}


	.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
	.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}

	.auto-judge .title {line-height: 16px;}
	.auto-judge .title .node-title {color: #15BC83;}
	.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
	.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}

	.auto-judge .content {position: relative;padding-top: 15px;}
	.auto-judge .content .placeholder {color: #999;}

	.auto-judge:hover {
		.close {display: block;}
		.priority-title {display: none;}
	}

	.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
	.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}

	.top-left-cover-line {left: -1px;}
	.top-right-cover-line {right: -1px;}
	.bottom-left-cover-line {left: -1px;}
	.bottom-right-cover-line {right: -1px;}


	.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
	.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
	.end-node-text {margin-top: 5px;text-align: center;}

	.auto-judge:hover {
		.sort-left {display: flex;}
		.sort-right {display: flex;}
	}

	.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
	.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}

	.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}

	.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
	.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}

	.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
	.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}

	[data-theme='dark'] {
		.node-wrap-box,.auto-judge {background: #2b2b2b;}
		.col-box {background: #222225;}
		.top-left-cover-line,
		.top-right-cover-line,
		.bottom-left-cover-line,
		.bottom-right-cover-line {background-color: #222225;}
		.node-wrap-box::before,.auto-judge::before {background-color: #222225;}
		.branch-box .add-branch {background: #222225;}
		.end-node .end-node-text {color: #d0d0d0;}
		.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #222225;}
	}

</style>
